<template>
	<view class="memberList">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-cont" style="position: fixed; top: 0; left: 0; z-index: 999;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()" style="margin:0;">
					<image class="wh-40" src="@/static/gane/goBack-white-icon.png"></image>
				</view>
				<view class="w-350 h-100 w-row-center w-wz-conts font-36">
					<text>VIP会员</text>
				</view>
				<view class="wh-80 w-row-center">
					<!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker> -->
				</view>
			</view>
		</view>
		<!-- 头部导航结束 -->

		<view class="absolute fixed full-width" style="background-color: rgb(13, 26, 38); height: 200rpx;">

		</view>

		<view class="content-box rel">
			<view class="full-width padding-top-xs text-color-white" style="background-color: rgb(13, 26, 38);">
				<view class="padding-sm">
					<view class="text-center">

						<image v-if="userInfo.headimgurl" :src="userInfo.headimgurl"  class="round vip-avatar">
						</image>
            <image v-else src="@/static/gane/user.png" mode="widthFix" class="round vip-avatar">
            </image>
						<view class="text-sm">
							{{userInfo.nickname || '游客'}} 
						</view>
					</view>

					<view class="vip-progress-bar margin-top-xs">
						<span class="vip-tag noy" :class="'v'+userInfo.vip"></span>
						<view class="vip-progress-box">
							<view class="vip-progress-line">
                <view class="vip-progress-rate" :style="'width: '+(userInfo.next_vip_ls_bfb)+'%;'"></view>
                <view class="vip-progress-rate1" :style="'width: '+(userInfo.next_vip_cz_bfb)+'%;'"></view>
							</view>
						</view>
						<span class="vip-tag noy " :class="'v'+(userInfo.vip+1)"></span>
					</view>
				</view>

				<view class="padding-bottom-xs vip-card text-color-black">
					<swiper class="swiper" previous-margin="72rpx" next-margin="40rpx" :current="userInfo.vip-1" @change="change">
						<swiper-item v-for="(item,index) in list" :key="index">
							<view class="cover radius-lg overflow item" :class="{'item-y-bg': item.id <= userInfo.vip}">
								<view class="tag">
									<span>{{item.id < userInfo.vip ? '已激活' : (item.id == userInfo.vip ? '当前' : '未激活')}}</span>
								</view>
								<view class="padding-right-xxl padding-left-xxl rel margin-top">
									<view class="text-lg number-font">
										<i>VIP{{item.id}}</i>
									</view>
									<view class="font-20" v-if="item.id < list[list.length - 1].id">
										需要
										<i class="number-font text-default">{{item.money.toLocaleString()}}</i>
										流水升级至
										<i class="number-font">VIP{{Number(item.id) + 1}}</i>
									</view>
									<view class="font-20" style="margin: 14rpx; 0" v-else>
										您已到达最高等级
									</view>
								</view>

								<view class="badge">
									<image class="yellow"
										:src="`/static/mine/badge_${item.id <= vipIndex ? 'y_' : ''}${item.id}.webp`"
										mode="widthFix"></image>
								</view>

								<view class="tip text-color-white padding-left-xxl text-xs margin-top">
									提示：截止 2024-12-16 17:06:00 <br />
									您已完成
									<i class="number-font text-sm">{{userInfo.liushui}}</i>
									流水
									<span>, 还需 {{(item.turnover - userInfo.liushui)>0?item.turnover - userInfo.liushui:0}}</span>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="padding-sm">
				<view class="bg-white radius-default overflow padding-sm">
					<view class="text-default text-bold">
						VIP{{current}}尊享
					</view>
					<view class="margin-top-xs vip-gift-item">
						<view class="van-grid">
							<view class="van-grid-item" style="flex-basis: 50%;">
								<view class="van-grid-item__content van-grid-item__content--horizontal">
									<view class="van-badge__wrapper">
										<image class="vip-icon" src="/static/mine/vip-icon1.png" mode="widthFix"></image>
									</view>
									<view class="">
										<span class="number-font text-default">{{item.num}}</span><br />
										{{item.title}}
									</view>
								</view>
							</view>
              <view class="van-grid-item" style="flex-basis: 50%;">
                <view class="van-grid-item__content van-grid-item__content--horizontal">
                  <view class="van-badge__wrapper">
                    <image class="vip-icon" src="/static/mine/vip-icon2.png" mode="widthFix"></image>
                  </view>
                  <view class="">
                    <span class="number-font text-default">{{item.num}}</span><br />
                    {{item.title}}
                  </view>
                </view>
              </view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="padding-sm">
				<view class="bg-white radius-default overflow padding-sm">
					<view class="text-default text-bold">
						VIP详情
					</view>
					<view class="margin-top-xs vip-gift-item">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imgIcon1 from '/static/mine/vip-icon1.png'
	import imgIcon2 from '/static/mine/vip-icon2.png'
	import imgIcon3 from '/static/mine/vip-icon3.png'
	import imgIcon4 from '/static/mine/vip-icon4.png'
  import $H from '@/pages/common/request.js'
	export default {
		data() {
			return {
				list: [
				],
				vipIndex: 0,
				current: 0,
				endBusiness: 0,
				userInfo: null
			}
		},
		created(){
			this.getInfo()
      this.getVip()
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			getInfo(){
				this.userInfo = uni.getStorageSync('UserInfo')
        this.current = this.userInfo.vip
			},
      getVip(){
        $H.post('/app_user_get_vip').then((res) => {
          if (res.code == 200) {
            this.list = res.data
            console.log(this.list,'list');
          }
        })
      },
		}
	}
</script>

<style scoped lang="scss">
	.w-row-center {
		color: #fff !important;
	}

	.index-bg {
		background-image: url('@/static/gane/rebate.webp');
		transform: translateY(-35px);
	}

	.content-box {
		top: 12.8vw;
		height: calc(100% - 12.8vw);
		position: fixed;
		left: 0px;
		right: 0px;
		bottom: 0px;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 1;
		padding-bottom: 3.2vw;

		.vip-avatar {
			width: 13.33333vw;
			height: 13.33333vw;
      border-radius: 50%;
		}

		.vip-progress-bar {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;



			.vip-progress-box {
				position: relative;
				flex: 1 1;
				height: 3.2vw;
				margin: 0 2.13333vw;
				border-radius: 13.33333vw;
				overflow: hidden;
				transform: translateY(1px);

				.vip-progress-line {
					position: relative;
					width: 100%;
					height: 100%;
					background: #dbdcdd;

					.vip-progress-rate {
						position: absolute;
						top: 0;
						left: 0;
						width: 0;
						height: 100%;
						background-image: url('@/static/gane/vip-progress-rate.png');
						background-size: auto 100%;
						border-radius: 13.33333vw;
						animation: scrollBg 5s linear infinite;
					}
          .vip-progress-rate1 {
            position: absolute;
            top: 7px;
            left: 0;
            width: 0;
            height: 100%;
            background-image: url('@/static/gane/vip-progress-rate1.png');
            background-size: auto 100%;
            border-radius: 13.33333vw;
            animation: scrollBg 5s linear infinite;
          }
				}


			}


		}

		.vip-icon {
			width: 54rpx;
		}

		.vip-card {
			.item {
				margin-right: 40rpx !important;
				height: 40vw;
				background-image: url('@/static/mine/card_bg.webp');

				.tag {
					padding: .8vw 1.86667vw;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					border-radius: 1.33333vw 0 1.33333vw 0;
					font-size: 3.2vw;
					background-color: #fcf7ed;
				}

				.badge {
					position: absolute;
					top: 2px;
					right: 4.66667vw;
					z-index: 10;

					.yellow {
						width: 20.66667vw;
					}
				}

				.tip {
					background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, .05));
					line-height: 4.26667vw;
					font-size: 2.66667vw;
					padding: .53333vw 0px .53333vw 13.33333vw;
				}
			}

			.item-y-bg {
				background-image: url('@/static/mine/card_bg_yellow.webp') !important;
			}
		}
	}

	.van-grid-item {
		.van-grid-item__content {
			font-size: 3.2vw;
			padding: 2.66667vw 0;
			box-sizing: border-box;
			height: 100%;
			display: flex;
			background-color: #fff;
			align-items: center;
		}
	}
	
	.van-badge__wrapper{
		margin-right: 20rpx;
	}

	uni-swiper {
		height: 40vw;
	}
</style>